<template>
  <n-drawer class="modify-list" v-model:show="active" width="63%">
    <n-drawer-content body-style="--n-body-padding:0">
      <template #header>
        <div class="my-title--primary">至尊钱包（修改）</div>
      </template>
      <div class="modify-list__content">
        <div class="modify-list__content--amend">
          <label @click="tabIndex = 0">
            <input type="radio" name="amend" checked>
            <div>修改</div>
            <div>
              <div class="amount">至尊钱包：￥9999.25</div>
              <div class="change">
                <div>修改后金额</div>
                <label>
                  <input type="number" placeholder="请输入修改金额" />
                  <div></div>
                </label>
              </div>
            </div>
          </label>
          <label  @click="tabIndex = 1">
            <input type="radio" name="amend">
            <div>修改记录</div>
            <div>
              <n-data-table
                :columns="[{ title: '修改前', key: 'before' }, { title: '修改后', key: 'after' }, { title: '操作人', key: 'operator' }, { title: '修改时间', key: 'time' }]"
                :data="[{ before: '9999.25', after: '10000', operator: '张三', time: '2022-02-25 09:51:18' }]" bordered
                style="--n-font-size:24px" />
            </div>
          </label>
        </div>
      </div>

      <template #footer>
        <div style="display: flex; align-items: center; width: 100%;" v-show="tabIndex === 1">
          <n-pagination v-model:page="page" :page-count="100" :page-slot="7" style="--n-item-size:44px;--n-item-font-size:20px;">
            <template #prev>
              上一页
            </template>
            <template #next>
              下一页
            </template>
            <template #suffix>
              <div class="modify-list__jump-page">到<input type="number">页<button>确定</button><span>10 条 / 页</span>
              </div>
            </template>
          </n-pagination>
        </div>
        <button class="my-btn--primary" v-show="tabIndex === 0" @click="active = false">确认</button>

      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { inject, ref } from "vue";
const active = inject('modifyListDrawer');
const page = ref(1);
const tabIndex = ref(0);
</script>

<style lang="less">
.modify-list {
  .my-title--primary {
    margin-left: 20px;
  }
  &__content {
    &--amend {
      position: relative;
      display: flex;
      margin: 30px 30px 0;

      >label {
        margin-right: .94vw;

        >input {
          display: block;
          width: 0;
          height: 0;
          opacity: 0;
        }

        >input+div {
          width: 148px;
          height: 60px;
          font-size: 26px;
          color: #4A5060;
          background: #F8F8F8;
          box-shadow: 0 0 0 1px #E5E5E5;
          border-radius: 5px;
          text-align: center;
          line-height: 60px;
        }

        >input+div+div {
          position: absolute;
          left: 0;
          display: none;
          width: 100%;

          .n-data-table {
            margin-top: 30px;
          }

          .amount {
            margin: 35px 0 40px;
            font-size: 30px;
            line-height: 1;
            font-weight: bold;
            color: #4A5060;
          }

          .change {
            >div {
              margin-bottom: 20px;
              font-size: 24px;
              line-height: 1;
              color: #2E323D;
            }

            >label {
              position: relative;
              display: block;
              width: 100%;
              height: 80px;

              >input {
                padding: 0 28px;
                width: 100%;
                height: 100%;
                font-size: 26px;
                border: 1px solid #E5E5E5;
                border-radius: 5px;
                box-sizing: border-box;

                &:focus {
                  border: 1px solid #1981F4;
                }

                &::placeholder {
                  font-weight: 500;
                  color: #999;
                }
              }

              >input:focus+div {
                display: block;
              }

              >input+div {
                position: absolute;
                display: none;
                right: 0;
                top: 50%;
                width: 48px;
                height: 48px;
                background: #2E323D;
                transform: translateY(-50%);
              }
            }
          }
        }

        >input:checked+div {
          color: #FFF;
          background: #2C8CF0;
          box-shadow: none
        }

        >input:checked+div+div {
          display: block;
        }
      }
    }


  }

  &__jump-page {
    font-size: 21px;
    color: #4A5060;
    margin: -2px 0 0 18px;

    input {
      margin: 0 15px;
      width: 64px;
      height: 42px;
      background: #F8F8F8;
      border: 1px solid #E5E5E5;
      border-radius: 5px;
      text-align: center;
    }

    button {
      margin: 0 30px;
      width: 88px;
      height: 44px;
      color: #FDFDFD;
      background: #2C8CF0;
      border-radius: 5px;
    }
  }
}
</style>